<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset="UTF-8">
        <title>TODOLIST</title>
        
        <script src='./jquery.js'></script>
        
    </head>
    <body>
        <div id="app">
        <input type="text" id="input"/>
        <button id="btn">提交</button>
        <ul id ="list">
            
        </ul>
        
        </div>
        <script >
            function Page(){

            }

            //原型上增加方法
            $.extend(Page.prototype,{
                init: function(){
                    this.bindEvents()
                },
                //绑定事件方法
                bindEvents:function(){
                        var button=$('#btn');

                        //$.proxy 改变 this 的指向：把 this.handleBtnClick 中得上下文永远绑成了 this（Page） 这个引用。
                        //如果这里不改变那么 handleBtnClick 函数里得this 就是指向 button 
                        //由于本例子未用到  handleBtnClick 中未用到this ，所以也可以这么写
                        //button.on('click',this.handleBtnClick);
                        button.on('click',$.proxy(this.handleBtnClick,this));
                        
                },
                handleBtnClick:function(){
                            inputElem=$("#input");
                            inputValue=inputElem.val();
                            ulElem=$("#list");
                            ulElem.append('<li>'+inputValue+'</li>');
                            inputElem.val('');
                        }
            })
            var page =new Page();
            page.init();
           
        </script>
    </body>
</html>
